<template>
  <view style="position: fixed;z-index: 100;top: 0;height: 80rpx;width: 100%;">
    <view v-if="mode == 'back'" class="main-search flex-row">
      <text class="iconfont icon-xiangzuojiantou" style="color: #fff" @click="toBack"></text>
      <view style="flex: 1;text-align: center" class="title-header">{{title}}</view>
    </view>

    <view v-if="mode == 'search'" class="main-search flex-row">
      <text class="iconfont icon-xiangzuojiantou" style="color: #fff;margin-right: 10rpx" @click="toBack"></text>
      <view style="flex: 1;text-align: center;border-radius: 30rpx;height: 50rpx;background: #7eb8f6" class="title-header">
        <input v-model="searchValue" class="uni-input" :placeholder="searchPlaceholder" :placeholder-style="{color:'#fff'}" style="text-align: left;padding-left: 20rpx;font-size: 24rpx;height: 50rpx"/>
      </view>
      <button type="default" size="default" class="btn-handle" @click="searchData">搜索</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      searchValue:'',
    }
  },
  props:{
    mode:{
      type:String,
      default:'back'
    },
    title:{
      type:String
    },
    searchPlaceholder:{
      type:String
    }
  },
  methods:{
    searchData(){
      this.$emit('throwSeach',this.searchValue)
    },
    toBack(){
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.main-search{
  height: 70rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #2979ff;
}

.title-header{
  color: #fff;
  font-size: 28rpx;
  font-weight: 700;
}

.btn-handle{
  //padding: 0 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  text-align: center;
  border-radius: 10rpx;
  margin:0 0 0 20rpx;
}
</style>
